<template>
	<view class=" bgf p30 r20 mt20 box useAnimate">
		<view class="item t-flex between" @click="emit('click',data)">
			<uv-image :src="$str.avatar(data.avatar)" mode="aspectFill"
			radius="50%"
			width="90rpx"
			height="90rpx"
			></uv-image>
			
			<view class="right">
				<view class="f30 c3 bold">
					{{data.name}}
				</view>
				<view class="tags t-flex mt10">
					<view class="tag">{{filterCarType()[0]}}</view>
					<view class="tag">{{filterCarType()[1]}}</view>
				</view>
				<view class="f24 c9 mt10">
					服务地区：{{data.city_area_name}} {{data.area_name}}
				</view>
				<view class="f24 c9 mt10">
					服务总次数 <text class="mainC bold ml10">{{data.service_count}}</text> <text class="ml40">总评分</text> <text class="mainC bold ml10">{{data.mark}}</text>
				</view>
				
			</view>
			<image :src="data.is_kx?'/static/image/08.png':'/static/image/07.png'" mode="widthFix" class="status"></image>
		</view>
		<view class="comment t-flex between c6 mt30" v-if="comment" @click.stop="$go('/pages/comment/comment?id='+data.user_id)">
			<view class="">
				查看评价
			</view>
			<text class="iconfont icon-xiangyou1"></text>
		</view>
	</view>
	
</template>

<script setup>
	
	const emit = defineEmits(['click'])
	
	let props = defineProps({
		comment:{
			type:Boolean,
			default:false
		},
		data:{
			type:Object,
			default:{}
		}
	})
	
	
	//去重车辆类型
	const filterCarType = ()=>{
		let arr = []
		let arr2 = []
		props.data.carinfo.forEach(item=>{
			if(!arr.includes(item.car_type_name)){
				arr.push(item.car_type_name)
			}
			if(!arr2.includes(item.car_dl_name)){
				arr2.push(item.car_dl_name)
			}
		})
		return [arr.join(','),arr2.join(',')]
	}
	
	
	
</script>

<style scoped lang="scss">
	.box{
		position: relative;
		
	}
	// .box{
	// 	overflow: hidden;
	// }
	.item{
		align-items:flex-start;
		position: relative;
		.right{
			width: calc(100% - 110rpx);
		}
		.tag{
			padding: 0 16rpx;
			height: 36rpx;
			background: #FFF8F4;
			border-radius: 4rpx;
			font-size: 20rpx;
			color: #FD541F;
			margin-right: 16rpx;
		}
	}
	
	.mt10{
		margin-top: 16rpx;
	}
	.ml40{
		margin-left: 40rpx;
	}
	
	.status{
		position: absolute;
		right: -38rpx;
		top: -30rpx;
		width: 116rpx;
		height: 58rpx;
	}
	
	.comment{
		padding-top: 24rpx;
		border-top: 1px solid #f3f3f3;
		border-radius: 0 0 20rpx 20rpx;
	}
	
</style>